import "./index.less";
import { useNavigate } from "react-router-dom";
import { PageHeaderNew } from "@/components";
import { useEffect, useState } from "react";
import { getActivityList } from "../service";
import { getParamsByUrl, htmlUnEscape } from "@/utils/tools";

interface DetailType {
  id: number | string;
  faburen: string;
  faburenAddress: string;
  title: string;
  sentTime: string;
  num: number | string;
  img: string;
  content: string;
}

export default function InfoDetail() {
  const navigate = useNavigate();
  const [pageParams, setPageParams] = useState<any>();
  const [pageTitle, setPageTitle] = useState<string>();
  const [detail, setDetail] = useState<DetailType>();

  const getList = async () => {
    try {
      const res = await getActivityList({
        sendType: pageTitle,
        messageType: "1",
      });
      if (res?.success && res?.code === 200 && pageParams?.id) {
        let data = res?.data?.filter((i: any) => i?.id == pageParams?.id)[0];
        setDetail(data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (pageTitle === "" || pageTitle) getList();
  }, [pageTitle]);
  useEffect(() => {
    let finalObj: any = getParamsByUrl(location.search);
    setPageParams(finalObj);
    switch (finalObj?.type) {
      case "":
        setPageTitle("");
        break;
      case "info":
        setPageTitle("社区资讯");
        break;
      case "unscramble":
        setPageTitle("政策解读");
        break;
      case "guide":
        setPageTitle("办事指南");
        break;
      case "disseminate":
        setPageTitle("普法宣传");
        break;
      default:
        break;
    }
  }, []);
  useEffect(() => {
    if (detail) {
      let content = htmlUnEscape(detail?.content);
      let parentHTML = document.getElementById("cid_cc_content");
      parentHTML.innerHTML = content;
    }
  }, [detail]);

  return (
    <div className="cid_contarnier">
      <div className="header-bg"></div>
      <PageHeaderNew
        title="内容详情"
        goBack={() =>
          navigate(`/communityInformation?type=${pageParams?.type}`)
        }
      />

      <div className="cid_content">
        <img src="/images/mycommunity/bioqian.png" alt="" />
        <div className="cid_content_content">
          <div className="cid_cc_title">{detail?.title}</div>
          <div className="cid_cc_time">
            <span>{detail?.faburenAddress}</span>
            <span>{detail?.sentTime}</span>
          </div>
          <div className="cid_cc_content">
            <div id="cid_cc_content"></div>
          </div>
        </div>
      </div>
    </div>
  );
}
